<template>
    <div class="echarts05" ref="echarts05"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myecharts: null,
            option: {
                xAxis: {
                    type: 'category',
                    data: [],
                    splitLine: {
                        show: false
                    },

                    axisLine: {
                        lineStyle: {
                            color: '#fff',

                        },
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        },
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return `地区: ${params[0].name}<br/>销量: ${params[0].value}`;
                    },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)',
                    borderColor: '#333',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(84, 83, 238, 0.9)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(167, 109, 229, 0.9)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            borderRadius: [30, 30, 0, 0], // 四个角的圆角半径
                            borderWidth: 0 // 边框宽度
                        },
                        barWidth: '40%' // 控制柱子宽度
                    }
                ]
            },
            ws: null,
            page: 1
        }
    },
    methods: {
        getData() {
            this.ws = new WebSocket('ws://127.0.0.1:9998');
            this.ws.onopen = () => {
                console.log('连接成功');
                let params = {
                    action: 'getData',
                    socketType: 'rankData',
                    chartName: 'rank',
                    value: ''
                }
                this.ws.send(JSON.stringify(params));

                this.ws.onmessage = (e) => {
                    let data = JSON.parse(e.data);
                    // console.log(data);

                    let ranks = JSON.parse(data.data)

                    ranks.sort((a, b) => b.value - a.value)
                    // console.log(ranks);


                    let total = Math.ceil(ranks.length / 7)
                    // console.log(total);

                    // 截取当前页数减一乘五到当前页数乘五的数据
                    let list = ranks.slice((this.page - 1) * 7, this.page * 7)
                    console.log(list);

                    // console.log(this.page);

                    this.option.xAxis.data = list.map(item => item.name)
                    this.option.series[0].data = list.map(item => item.value)

                    this.myecharts.setOption(this.option);

                    this.page++
                    if (this.page > total) {
                        this.page = 1
                    }
                }
            }
        }
    },
    mounted() {
        this.myecharts = echarts.init(this.$refs["echarts05"]);
        // this.myecharts.setOption(this.option);
        this.getData()
    }
}
</script>
<style scoped>
.echarts05 {
    width: 100%;
    height: 100%;
}
</style>